<!DOCTYPE html>

<html lang="en">
  <head>
    <link type="text/css" rel="stylesheet" href="/static/main.css" />
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Mask-RCNN</title>
  </head>

  <body>
    <!--页面-->
    <div class="header">
      <h1 id="jq">
        <span id="hometown">图像处理</span>
      </h1>
    </div>

    <div class="main">
      <!--<div class="links">-->
      <ul id="menu">
        <li>
          <a href="index.html" title="model" target="_blank">模型处理</a>
        </li>
        <li>
          <a href="picsolve.html" title="process" target="_blank">图像处理</a>
        </li>
      </ul>
      <!--</div>-->
      <div class="search">
        <form enctype="multipart/form-data" id="uploadForm" style="display: inline; text-align: center">
          <input
            id="file-upload"
            type="file"
            class="hidden"
            accept="image/png,image/gif,image/jpeg,image/jpg"
            onchange="loadAnimate()"
            onchange="showImg()"
          />
          <label for="file-upload" id="file-drag" class="upload-box">
            <div id="upload-caption">选择图片</div>
            <img id="image-preview" class="hidden" src="" />
          </label>
          <label>
            <select id="select" name="select" style="font-size: 1rem; height: 35px; width: 150px; margin-bottom: 20px; margin-left: 50px">
              <option value="0">二值化</option>
              <option value="1">测量高度</option>
            </select>
          </label>
          <!--{#					<input type="file" onchange="loadAnimate()" for="file-upload" id="file-drag" class="upload-box">#}
{#					<p style="display: none;" id="up"></p>#}-->
        </form>
      </div>
      <div style="margin-right: 15px">
        <!--<img id="result-img" src="#" style="display: none;">
        <span id="result-msg" style="display: none;"></span>-->

        <input type="button" value="提交" class="button" onclick="handle()" onchange="loadAnimate()" />
        <input type="button" value="清除" class="button" onclick="clearImage();" />
      </div>

      <div id="image-box">
        <div>
          <img id="result-img" src="#" style="display: none; max-height: 20rem; max-width: 16rem" />
          <span id="result-msg" style="display: none"></span>
        </div>
        <!--{# <img id="image-display" />#}
{#				<div id="pred-result" class="hidden"></div>#}
{#				<svg id="loader" class="hidden" viewBox="0 0 32 32" width="32" height="32">#}
{#					<circle id="spinner" cx="16" cy="16" r="14" fill="none"></circle> {# </svg>#} {# </div>#}
{#                </svg>#}
{#            </div>#}-->
      </div>
    </div>
  </body>

  <script src="/static/jquery.min.js"></script>

  <script>
    function loadAnimate() {
      // alert("123")
      console.log('111')
      $('#file_drag').append('<div class="hero-scan"></div>')
    }

    function showImg() {
      var file = document.getElementById('file-drag').files[0]
      var re = new FileReader()
      re.readAsDataURL(file)
      console.log(file)
      re.onload = function (re) {
        document.getElementById('image-preview').src = re.target.result
        document.getElementById('image-preview').style.display = block
      }
    }

    function handle() {
      let select = document.querySelector('#select').selectedOptions[0].value
      let formData = new FormData()
      formData.append('file', $('#file-upload')[0].files[0])
      formData.append('select', select)
      console.log(select)
      $.ajax({
        url: '/api/handle/',
        data: formData,
        type: 'POST',
        dataType: 'json',
        contentType: false,
        processData: false,
        success: function (data) {
          console.log(data)
          let msgEle = document.querySelector('#result-msg')
          msgEle.innerText = data.message

          msgEle.style.display = 'inline'
          let imgEle = document.querySelector('#result-img')
          // base 64
          let img = data.data
          if (img != null && typeof img === 'string') {
            imgEle.src = img
            imgEle.style.display = 'inline'
          }
          $('.hero-scan').remove()
        },
        error: function (data) {
          alert(data.message)
          // 取消加载动画
          $('.hero-scan').remove()
        }
      })
    }

    function clearImage() {
      $('#file-upload')[0].value = ''
    }
  </script>
</html>
